<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>按钮点击事件响应</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<h3>使用多种方法实现按钮点击事件响应</h3>
		直接为HTML标签添加事件响应：<button onclick="showAlert(this)">按钮1</button><br>
		为元素onclick属性添加事件响应：<button id="btn2">按钮2</button><br>
		使用监听器监听元素的click事件：<button id="btn3">按钮3</button><br>
		使用jQuery的click()方法实现事件响应：<button id="btn4">按钮4</button><br>
		使用jQuery的bind()方法实现事件响应：<button id="btn5">按钮5</button><br>
	<script>
		function showAlert(button) {
		alert("你点击了: " + button.textContent);
		}
		document.getElementById("btn2").onclick = function() {
			alert("你点击了: " + this.textContent);
		};
		document.getElementById("btn3").addEventListener("click", function() {
			alert("你点击了: " + this.textContent);
		});
		$("#btn4").click(function() {
			alert("你点击了: " + $(this).text());
		});
			$("#btn5").bind("click", function() {
				alert("你点击了: " + $(this).text());
		});
	</script>
</body>
</html>